<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>小艾爱跑 | 大屏幕</title>
<link rel="shortcut icon" type="image/ico" href="web/favicon.ico">
<link rel="stylesheet" href="http://static-paobuqu-com.oss-cn-hangzhou.aliyuncs.com/css%2Fbootstrap.min.css">
<script type="text/javascript" src="http://static-paobuqu-com.oss-cn-hangzhou.aliyuncs.com/js%2Fjquery-2.1.1.js"></script>
<style type="text/css">
    
    body,td,th {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 20px;font-weight: bold;color: #1d1007; line-height:24px}

    h2 {
        margin-top: 28px;
        margin-bottom: 0px;
    }

    table{
        border-collapse: collapse;
        width: 100%;
        text-align: center;
    }
    td{
        border:1px solid #000;
        padding: 5px;
    }


</style>
</head>
<body>
    <div class="container">
        <div class="col-md-5"><h1 id="race_name"></h1></div>
        <div class="col-md-4"><h2 id="course_name">科目：</h2></div>
        <div class="col-md-3"><h2 id="sex">性别：</h2></div>
        <div id="table"></div>
        <p style="position: absolute; bottom: 10px; right: 20px;">由小艾爱跑的【比赛助手】提供技术支持</p>

    </div>
</body>
</html>
<script type="text/javascript">

    //缓存中取数据
    var dataForScreen = JSON.parse(localStorage.getItem('dataForScreen'));
    console.log(dataForScreen);
    //比赛名称
    $('#course_name')[0].innerHTML = dataForScreen.course_name;
    //科目名称
    $('#race_name')[0].innerHTML += dataForScreen.race_name;
    //性别
    if (dataForScreen.sex == 'male') {
        $('#sex')[0].innerHTML += '男';
    } else if (dataForScreen.sex == 'female') {
        $('#sex')[0].innerHTML += '女';
    } else {
        $('#sex')[0].innerHTML += '全部';
    }

    //初始数据准备
    $.ajax({
        dataType:'json',
        type: 'GET',
        url: dataForScreen.url,
        success: function(data) {
           console.log(data);
           $('#table').empty();
           setTable(data.data);
        },
        error: function(error) {
           alert("请求失败");
        }
    });

    //定时刷新
    var handler = function(){
        $.ajax({
            dataType:'json',
            type: 'GET',
            url: dataForScreen.url,
            success: function(data) {
               console.log(data);
               $('#table').empty();
               setTable(data.data);
            },
            error: function(error) {
               // alert("请求失败");
            }
        });
    }
    var timer = setInterval( handler , 30000);

    /**
     * 填写表格数据
     */
    function setTable(data) {

        var div = document.getElementById("table"); 

        //创建table
        var table = document.createElement("table");

            //title
            //创建一行
            var row = table.insertRow();
            var cell = row.insertCell();
            cell.innerHTML='选手号';
            cell = row.insertCell();
            cell.innerHTML='姓名';
            cell = row.insertCell();
            cell.innerHTML='用时';
            cell = row.insertCell();
            cell.innerHTML='圈数';
            cell = row.insertCell();
            cell.innerHTML='排名';

            //行数
            var i = 0;
            //最大行数
            var maxRow = 20
            data.forEach(function(element){
                i++;
                if (i > maxRow) {
                    return;
                }
                var row = table.insertRow();
                var cell = row.insertCell();
                cell.innerHTML=element.bib;
                cell = row.insertCell();
                cell.innerHTML=element.runner_name;
                cell = row.insertCell();
                cell.innerHTML=element.use_time;
                cell = row.insertCell();
                cell.innerHTML=element.circle_number;
                cell = row.insertCell();
                cell.innerHTML=element.rank;
            });
        div.appendChild(table); 
    }

</script> 